<template>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      :pager-count="pager"
      prev-text="上一页"
      next-text="下一页"
      @current-change="change"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "footerView",
  data() {
    return { pager: 7 };
  },
  props: {
    total: {
      default: 1,
      type: Number,
    },
    currentPage: {
      default: 1,
      type: Number,
    },
    pageSize: {
      default: 10,
      type: Number,
    },
  },
  mounted() {
    this.resizeHandler();
  },
  methods: {
    change(e) {
      this.$emit("handleCurrentChange", e);
      console.log(e);
    },
    resizeHandler() {
      if (window.innerWidth < 768) {
        this.pager = 4;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.pagination {
  padding: 30px 0;
  display: flex;
  justify-content: center;
}
::v-deep.el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .btn-prev {
  background-color: #ececec;
  min-width: 80px;
  border-radius: 5px;
  height: 30px;
  line-height: 28px;
}
::v-deep .el-pagination {
  .el-pager {
    li {
      height: 30px;
      line-height: 28px;
      min-width: 50px;
      border-radius: 5px;
      background: transparent;
    }
    li:not(.disabled).active {
      background-color: #8f79c4;
    }
  }
}
</style>
